<template>
	<view class="root">
		<u-action-sheet :list="list" v-model="show" :tips="tips" @click="evaluateTypeClick"></u-action-sheet>
		<scroll-view class="contet" scroll-y="true">
			<view class="children-ready-item">
				<text class="children-title">一、宝宝信息</text>

				<view class="children-info-view">
					<view class="children-info-view-left">
						身高:<input v-model="height" class="children-info-input" placeholder="CM" :placeholder-style="placeholderStyle"
						 type="number" />
					</view>
					<view class="children-info-view-right">
						体重:<input v-model="weight" class="children-info-input" placeholder="KG" :placeholder-style="placeholderStyle"
						 type="digit" />
					</view>
				</view>
				<view class="children-info-view">
					<view>
						<view>同时开展交流互动警示行为测评</view>
						<view style="font-size: 20rpx;color: #666666;">
							(宝宝在情绪不稳定，或者不配合时请关闭)
						</view>
					</view>
					<switch style="margin-left: 20rpx; transform:scale(0.7)" :checked="false"  @change="checkChange" />
				</view>
			</view>

			<view class="children-ready-item">
				<text class="children-title">二、测评须知</text>
				<text class="ready-hint">
					1. 把测评使用的道具准备充分。\n2. 准备一间安静的教室。\n3. 每个宝宝单独测评。\n4. 测评前生活老师协助带孩子。\n5. 测评结束后的宝宝由生活老师带回大教室。\n6.向家长解释要恰当，注意技巧，尤其对发育落后的宝宝更要慎重。
				</text>
			</view>

			<view class="children-ready-item">
				<text class="children-title">三、测评道具</text>
				<view class="assess-tool-view">
					<view v-for="(item,index) in imgList" class="assess-tool-item" @click="previewImage(index)" :key="item.id">
						<image class="assess-tool-img" mode="aspectFill" :src="formatImageUrl(item.imgUrl,240,240)"></image>
						<text class="assess-tool-title">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="safe-area-view"></view>
		</scroll-view>
		<view class="assess-fixed-view" @click="beginClick()">
			<view style="display: flex;justify-content: center;align-items: center;height: 120rpx;">
				<view class="assess-begin">开始测评</view>
			</view>
			<view class="safe-area-view"></view>
		</view>

	</view>
</template>

<script>
	import { evaluateChildrenInfo, addEvaluate } from '../../api/evaluate.js'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	export default {
		data() {
			return {
				children: {},
				imgList: [],
				
				height: '',
				weight: '',
				
				placeholderStyle: 'font-size:26rpx;color: #CCCCCC;',
				
				tips: {
					text: '请选择适合的测评模式(设置中心更改测评模式)',
					color: '#909399',
					fontSize: 30
				},
				list: [{
					text: '向导模式',
					subText: '适合对测评还在学习中的老师'
				}, {
					text: '辅助模式',
					subText: '适合对测评有一定了解的老师'
				}, {
					text: '专家模式',
					subText: '适合对测评非常熟悉的老师'
				}],
				show: false
			}
		},
		onLoad(option) {
			console.log(option);
			this.childrenId = option.childrenId;
			this.getEvaluateChildren();
			this.check = false;
			this.initEvaluateType();
		},
		methods: {
			getEvaluateChildren() {
				evaluateChildrenInfo(this.childrenId).then(res =>{
					console.log(res);
					this.children = res.data.children;
				})
			},
			
			beginClick() {
				if (this.$u.test.isEmpty(this.height)) {
					uni.showToast({
						title: '请填写宝宝身高',
						icon: 'none'
					})
					return;
				}
				const height = parseInt(this.height);
				if (height < 40 || height > 150) {
					uni.showToast({
						title: '您输入的身高不在正常范围(40-150cm)',
						icon: 'none'
					})
					return;
				}
				if (this.$u.test.isEmpty(this.weight)) {
					uni.showToast({
						title: '请填写宝宝体重',
						icon: 'none'
					})
					return;
				}
				const weight = parseInt(this.weight);
				if (weight < 2 || weight > 35) {
					uni.showToast({
						title: '您输入的体重不在正常范围(2-35kg)',
						icon: 'none'
					})
					return;
				}
				this.checkEvaluateType();
			},
			
			checkEvaluateType() {
				if (this.$u.test.isEmpty(this.evaluateType)) {
					this.show = true;
					return;
				}
				this.addEvaluate(this.evaluateType);
			},
			
			evaluateTypeClick(index) {
				if (index === 1) {
					this.addEvaluate('pro');
					this.setEvaluateType('pro');
				} else if (index === 2){
					this.addEvaluate('enterprise');
					this.setEvaluateType('enterprise');
				} else {
					this.addEvaluate('normal');
					this.setEvaluateType('normal');
				}
			},
			
			addEvaluate(evaluateType) {
				const birthday = formatDateByTimestamp(this.children.birthday, 'yyyy-mm-dd');
				let params = {
					childrenId: this.childrenId,
					height: this.height,
					weight: this.weight,
					skipWarningDiemnsion: !this.check,
					evaluateType: evaluateType,
					birthday: birthday
				}
				if (evaluateType === 'pro' || evaluateType === 'enterprise') {
					this.addEvaluateForFull(params)
				} else {
					this.addEvaluateForChildren(params)
				}
			},
			
			addEvaluateForChildren(params) {
				uni.showLoading({})
				addEvaluate(params).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.redirectTo({
						url: '/pages_evaluate/evaluate/evaluate-content?recordId=' + res.data.id
					});
				}).catch(error => {
					uni.hideLoading();
					console.log(error);
				});
			},
			
			addEvaluateForFull(params) {
				console.log(params)
				const data = JSON.stringify(params);
				console.log(data)
				uni.redirectTo({
					url: '/pages_evaluate/evaluate/evaluate-full-assess?data=' + data
				})
			},
			
			setEvaluateType(value) {
				uni.setStorage({
				    key: 'evaluate_type',
				    data: value,
				});
			},
			
			initEvaluateType() {
				try {
				    this.evaluateType = uni.getStorageSync('evaluate_type');
				} catch (e) {
				}
			},

			checkChange(evt) {
				console.log(evt);
				this.check = evt.detail.value;
			},
			///预览图片
			previewImage(current) {
				var urls = new Array();
				for (var index in this.imgList) {
					var item = this.imgList[index];
					if (!utils.isEmpty(item.imgUrl)) {
						urls[index] = item.imgUrl;
					}
				}
				uni.previewImage({
					current: current,
					urls: urls,
				})
			},
		}
	}
</script>

<style lang="scss">
	uni-page-body,
	#app {
		height: 100%;
	}

	.root {
		height: 100%;
		width: 100%;
		background-color: #F7F7F7;
	}

	.contet {
		display: flex;
		flex-direction: column;
		background-color: #F7F7F7;
		padding-bottom: 160rpx;
	}

	.children-ready-item {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin: 20rpx;

		border-radius: 0px 0px 8rpx 8rpx;

		padding-bottom: 20rpx;
	}

	.children-title {
		font-size: 36rpx;
		color: #FFFFFF;
		background: rgba(250, 203, 47, 1);
		opacity: 1;
		border-radius: 8rpx 8rpx 0px 0px;

		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.children-info-view {
		display: flex;
		flex-direction: row;
		align-items: center;

		font-size: 30rpx;
		color: #666666;
		margin-top: 26rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: 650rpx;
	}

	.children-info-view-left {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		align-items: center;
	}

	.children-info-view-right {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
		align-items: center;
		justify-content: flex-end;
	}

	.children-info-input {
		width: 200rpx;
		height: 60rpx;
		border: 2rpx solid rgba(153, 153, 153, 1);
		opacity: 1;
		border-radius: 8rpx;
		margin-left: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.children-sex {
		margin-left: 10rpx;
	}

	.children-sex-radio {
		margin-right: 30rpx;
	}

	.ready-hint {
		color: #666666;
		font-size: 24rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		line-height: 50rpx;

		// font-family: "Courier New", Courier, monospace;
		// font-weight:400;
		// line-height:21px;
	}

	.assess-tool-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}

	.assess-tool-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.assess-tool-img {
		width: 120rpx;
		height: 120rpx;
		border-color: #E6E6E6;
		border-width: 1px;
		border-style: solid;
	}

	.assess-tool-title {
		color: #999999;
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.assess-fixed-view {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 0rpx;

		background: rgba(255, 171, 0, 1);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
		opacity: 1;

		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
		border: none;
	}
	
	button::after {
		 border: none;
	}

	.assess-ready-img {
		width: 25rpx;
		height: 42rpx;
	}

	.assess-begin {
		margin-left: 30rpx;
	}

	.chart-title {
		color: #333333;
		font-size: 30rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.chart-hint {
		color: #333333;
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.charts {
		width: 100%;
		height: 500upx;
		// background-color: #007AFF;
	}

	.relationship-view {
		width: 174rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #CCCCCC;
	}

	.relationship-style {
		font-size: 30rpx;
		color: #666666;
	}

	.relationship-dropdown {
		width: 0;
		height: 0;
		border-top: 14rpx solid #707070;
		border-right: 14rpx solid transparent;
		border-bottom: 0rpx solid transparent;
		border-left: 14rpx solid transparent;
		margin-right: 15rpx;
	}
	
</style>
